<template>
	<view class="cpdd-date">
		<view class="flex-ac" @tap="handleOpenDate" style="position: relative;">
			<input type="text" v-model="innerValue" disabled class="flex1" :placeholder="placeholder"
				placeholder-class="plStyle" style="pointer-events: none;opacity: 0;" />
			<text class="showname bgfff" v-if="!disabled" :class="{'plStyle':!innerLabel}">{{innerLabel||placeholder}}</text>
			<text class="showname bgfff" v-else>{{innerLabel||'-'}}</text>
			<text class="gui-icons f40 c999"  v-if="!disabled">&#xe661;</text>
		</view>
		<gui-popup ref="guipopupBottom" position="bottom" :zIndex="999" @open="openPopuped">
			<scroll-view :scroll-y="true" class="bgfff" style="height: 84vh;">
				<gui-date-between ref="guiDateBetween" @selectDate="selectDate"
					:monthNumber="monthNumber"></gui-date-between>
			</scroll-view>
			<view class="right-area-footer-place bgfff"></view>
			<view class="right-area-footer flex-ac bgfff">
				<view class="saveBtn cancleBtn" @tap="handleCloseDate">取消</view>
				<view class="saveBtn" @tap="handleChangeDate">选择</view>
			</view>
		</gui-popup>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: []
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			monthNumber: {
				type: Number,
				default: 12
			},
			disabled: {
				type: Boolean,
				default: false
			},

		},
		watch: {
			value(val) {
				this.setDefault()
			},
		},
		data() {
			return {
				timeRange: [],
				innerValue: '',
				innerLabel:''
			}
		},
		created() {
			this.setDefault()
		},
		methods: {
			openPopuped(){
				setTimeout(()=>{
					var graceDateBetween = this.$refs.guiDateBetween;
					if (!this.value.length) return;
					let cpddDateRangeVal = JSON.parse(this.value)
					var testdayStart =this.removeInnerHyphens(cpddDateRangeVal[0]);
					var testdayEnd =cpddDateRangeVal.length==2?this.removeInnerHyphens(cpddDateRangeVal[1]):this.removeInnerHyphens(cpddDateRangeVal[0]);
					graceDateBetween.setBetween([+testdayStart, +testdayEnd]);
				},200)
			},
			handleOpenDate() {
				if(this.disabled) return;
				this.$refs.guipopupBottom.open();
			},
			handleCloseDate() {
				this.$refs.guipopupBottom.close();
			},
			setDefault() {
				this.innerValue = ''
				this.innerLabel=''
				if (!this.value.length) return;
				let cpddDateRangeVal = JSON.parse(this.value)
				var testdayStart =cpddDateRangeVal[0];
				var testdayEnd =cpddDateRangeVal.length==2?cpddDateRangeVal[1]:cpddDateRangeVal[0];
				// 设置默认区间
				this.innerLabel = cpddDateRangeVal.length==2?testdayStart+'~'+testdayEnd:testdayStart
				this.innerValue = JSON.stringify([testdayStart, testdayEnd]) 
			},
			removeInnerHyphens(str) {
			  return str.replace(/-(.)/g, '$1').replace(/-(.)/g, '$1');
			},
			selectDate(e) {
				this.timeRange = e
			},
			handleChangeDate() {
				this.handleCloseDate()
				if (!this.timeRange.length) return;
				let arr = this.timeRange[0]
				let startTime = arr[0] + ''
				let endTime = arr[1] + ''
				if (startTime == endTime) {
					this.innerLabel = startTime.slice(0, 4) + '-' + startTime.slice(4, 6) + '-' + startTime.slice(6, 8)
				    this.innerValue = JSON.stringify([this.innerLabel])
				} else {
					this.innerLabel = startTime.slice(0, 4) + '-' + startTime.slice(4, 6) + '-' + startTime.slice(6, 8) +
						'~' + endTime.slice(0, 4) + '-' + endTime.slice(4, 6) + '-' + endTime.slice(6, 8)
				    this.innerValue =JSON.stringify(this.innerLabel.split('~')) 
				}
				this.$emit('input', this.innerValue)
				this.$emit('change', this.innerValue)
			}

		}
	}
</script>

<style scoped>
	.showname {
		position: absolute;
		left: 0;
		width: 450rpx;
		overflow: hidden;
	}
</style>